<template>
    <div class="mindmap">
        <div class="node">
            <div @click="seeNodeDetail(index, item)" class="circle" :class="{
                'green': item.nodeState == 1,
                'red': item.nodeState == 0,
                'orange': item.nodeState == 2,
            }">
                {{ item.percent }}
            </div>

            <div class="name">
                <div v-if="!isEditing" @click="startEdit" class="pointer">{{ item.nodeName }}</div>
                <el-input v-else v-model="editedName" @blur="finishEdit" @keyup.enter="finishEdit" ref="editInput"
                    style="width: 200px;" />
            </div>

            <div class="operations">
                <a @click="addBrotherItem(index, item)">同级 +</a>
                <span>|</span>
                <a @click="addChildItem(index, item)">子级 +</a>
                <span>|</span>
                <a @click="deleteItem(index, item)">删除</a>
            </div>

            <div class="info">
                <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
                <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
            </div>

            <div class="btn"><a @click="testIntem(index, item)">编辑</a></div>

            <div v-if="item.children && item.children.length" class="children">
                <RecursiveItem v-for="(child, childIndex) in item.children" :key="childIndex" :item="child"
                    :index="childIndex" @editItem="editItem" @addBrotherItem="addBrotherItem"
                    @addChildItem="addChildItem" @deleteItem="deleteItem" @testIntem="testIntem"
                    @seeNodeDetail="seeNodeDetail" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, onUnmounted, nextTick } from 'vue';
import RecursiveItem from './RecursiveItem.vue';
import { formatDateTime } from "@/utils/format";
// import { ElMessage } from 'element-plus';

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    index: {
        type: Number,
        required: true
    },
});

const emit = defineEmits(['testIntem', 'editItem', 'addBrotherItem', 'addChildItem', 'deleteItem', 'seeNodeDetail', 'expandCollapse']);

const isEditing = ref(false);
const editedName = ref(props.item.nodeName);
const editInput = ref(null);

const startEdit = () => {
    isEditing.value = true;
    nextTick(() => {
        if (isEditing.value && editInput.value) {
            editInput.value.focus();
        }
    });
};

const finishEdit = () => {
    isEditing.value = false;
    if (!editedName.value) {
        // editedName.value = props.item.nodeName;
        return //ElMessage.error("请输入节点名称");
    }
    if (editedName.value !== props.item.nodeName) {
        emit('editItem', props.index, { ...props.item, nodeName: editedName.value });
    }
};

const testIntem = (index, item) => {
    emit('testIntem', index, item);
};

const editItem = (index, item) => {
    emit('editItem', index, item);
};

const addBrotherItem = (index, item) => {
    emit('addBrotherItem', index, item);
};

const addChildItem = (index, item) => {
    emit('addChildItem', index, item);
};

const deleteItem = (index, item) => {
    emit('deleteItem', index, item);
};

const seeNodeDetail = (index, item) => {
    emit('seeNodeDetail', index, item)
};

const expandCollapse = (index, item) => {
    emit('expandCollapse', index, item);
};

onMounted(() => {

});

onUnmounted(() => {

});

</script>

<style lang="scss" scoped>
.mindmap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

.node {
    position: relative;
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    width: 200px; /* 可以根据需要调整 */
    transition: all 0.3s ease;
}

.node:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
}

.circle.green {
    background-color: #a5dc86;
    color: #fff;
}

.circle.red {
    background-color: #f86c6b;
    color: #fff;
}

.circle.orange {
    background-color: #ff9800;
    color: #fff;
}

.name {
    font-size: 16px;
    font-weight: bold;
}

.operations, .info {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

.btn a {
    display: inline-block;
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    margin-top: 10px;
}

.btn a:hover {
    background-color: #0056b3;
}

.children {
    margin-top: 20px;
    padding-left: 20px;
    border-left: 1px solid #ccc;
}

/* 递归组件的样式可能需要额外的调整以确保层次结构正确显示 */
.children .node {
    margin-left: 20px; /* 缩进以表示层次结构 */
}
</style>
